<template>
  <div>
    <div class="card">
      <el-form :model="form" label-width="auto">
        <el-form-item label="状态">
          <!-- 单选按钮组 -->
          <el-radio-group v-model="form.status">
            <el-radio value="">全部</el-radio>
            <el-radio value="草稿">草稿</el-radio>
            <el-radio value="待审核">待审核</el-radio>
            <el-radio value="审核通过">审核通过</el-radio>
            <el-radio value="审核失败">审核失败</el-radio>
            <el-radio value="已删除">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="频道" style="width: 400px">
          <el-select v-model="form.channel_id" placeholder="请选择文章频道" clearable>
            <el-option :label="item.name" :value="item.id" v-for="item in channels" />
          </el-select>
        </el-form-item>

        <el-form-item label="日期" style="width: 400px">
          <el-date-picker
            v-model="rangeDate"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label=" ">
          <el-button type="primary" @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="card">
      <div class="table-title">根据筛选条件共查询到{{ total }}条结果：</div>
      <!-- 表格数据 -->
      <el-table :data="list" style="width: 100%" border stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="封面" width="90">
          <template #default="{ row }">
            <el-image style="width: 60px; height: 60px" :src="row.cover_images[0]" fit="fill" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="发布时间">
          <template #default="{ row }">
            {{ dayjs(row.pub_date).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="channel_name" label="文章频道" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-space>
              <el-link
                type="primary"
                :disabled="row.status === '已删除' || row.author_id !== store.user.id"
                >修改</el-link
              >

              <el-link
                v-if="row.status === '已删除' || row.author_id !== store.user.id"
                type="danger"
                :disabled="row.status === '已删除' || row.author_id !== store.user.id"
                >删除</el-link
              >

              <el-popconfirm title="确认删除此文章吗?" @confirm="delArticle(row.id)" v-else>
                <template #reference>
                  <el-link type="danger">删除</el-link>
                </template>
              </el-popconfirm>
            </el-space>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="form.page"
          v-model:page-size="form.size"
          :page-sizes="[2, 3, 5, 10]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { getChannelsApi, queryArticleApi, delArticleApi } from '../../api'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import useUserStore from '../../store/userStore'

const store = useUserStore()

// do not use same name with ref
const form = reactive({
  // 必传参数
  page: 1,
  size: 3,
  status: '',
  // 可选参数
  channel_id: '',
  st: '',
  et: ''
})

const list = ref([])
const total = ref(0)
const totalPage = ref(0)

// 选中的筛选日期
const rangeDate = ref([])

watch(rangeDate, (newValues) => {
  // 如果监听到，用户选择的日期为空，则重置 st 和 et 的值
  if (!newValues || newValues.length === 0) {
    form.st = ''
    form.et = ''
    return
  }

  // 格式化时间，分别为 st 和 et 赋值
  form.st = dayjs(newValues[0]).format('YYYY-MM-DD 00:00:00')
  form.et = dayjs(newValues[1]).format('YYYY-MM-DD 23:59:59')
})

const channels = ref([])
onMounted(async () => {
  const result = await getChannelsApi()
  channels.value = result.data
})

onMounted(() => {
  onSubmit()
})

const onSubmit = async () => {
  const result = await queryArticleApi(form)
  console.log(result)

  list.value = result.data.rows
  total.value = result.data.total
  totalPage.value = result.data.totalPage
}

// 监听到了每页展示多少条数据发生了变化
const handleSizeChange = (newSize) => {
  form.size = newSize
  onSubmit()
}

// 监听到了页码值的变化
const handleCurrentChange = (newPage) => {
  form.page = newPage
  onSubmit()
}

// 根据id删除文章
const delArticle = async (id) => {
  await delArticleApi(id)
  ElMessage.success('删除成功!')
  onSubmit()
}
</script>

<style scoped>
.card {
  border-radius: 10px;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.table-title {
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 10px;
}

.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
